<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <style>
    .s-btn + .s-btn{
      margin-top: 12px;
    }
  </style>
</head>

<body class="p_large font_large">

  <div class="portrait">当前（浏览器）是竖屏</div>
  <div class="landscape">当前（浏览器）是横屏</div>

  <section>
    <p class="font_large">一个简单的scss样式库</p>
  </section>

  <hr>

  <section class="p-t_xlarge">

    <h2 class="l-h_15">按钮</h2>
    <div>
      <p>
        <button name="button" class="s-btn" title="默认按钮">默认</button>
        <button name="button" class="s-btn primary r_xsmall no-b" title="primary按钮">Primary</button>
        <button name="button" class="s-btn success r_large">Success</button>
        <button name="button" class="s-btn warning r_xsmall">Warning</button>
        <button name="button" class="s-btn error r_xsmall circle">Error</button>
      </p>
      
      <p>
        <button name="button" class="s-btn w_100 r_xsmall">长按钮</button>
        <button name="button" class="s-btn w_100 r_xsmall font_medium circle">Medium长按钮</button>
        <button name="button" class="s-btn w_100 r_small font_large primary circle plus-height">Large长按钮</button>
      </p>
    </div>

    <h2 class="l-h_15">表单</h2>
    <div class="">
      <div class="s-grid-x align-middle b-b p-t_medium p-b_medium">
        <div class="s-cell-2">
          <label class="l-h_1" for="">文本</label>
        </div>
        <div class="s-cell-10 cell-access">
          <div class="access-block">
            <input class="s-input" type="text" placeholder="输入姓名" name="" id="">
          </div>
        </div>
      </div>

      <div class="grid-x align-top b-b p-t_medium p-b_medium">
        <div class="cell">
          <label for="">文本域</label>
        </div>
        <div class="cell">
          <div>
            <textarea class="s-textarea" name="" id="" rows="3" placeholder="输入详细地址"></textarea>
          </div>
        </div>
      </div>
    </div>

    <br/>

    <h2>图标</h2>

    <p class="font_xxlarge">
      <i class="s-icon-arrow s-icon-arrow_right"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_right primary thin"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_left success"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_up error"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_down warning"></i>&nbsp;
      
      <br/>
      
      <span class="s-icon-checkbox"><i></i></span>
      <span class="s-icon-checkbox disabled"><i></i></span>
      <span class="s-icon-checkbox r_xsmall checked"><i></i></span>
      <span class="s-icon-checkbox r_xsmall dark checked disabled"><i></i></span>

      <span class="s-icon-checkbox s-icon-checkbox_circle"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle disabled"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle dark checked"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle checked disabled"><i></i></span>

      <br/>

      <span class="s-icon-radio"><i></i></span>
      <span class="s-icon-radio disabled"><i></i></span>
      <span class="s-icon-radio checked"><i></i></span>
      <span class="s-icon-radio dark checked"><i></i></span>
      <span class="s-icon-radio checked disabled"><i></i></span>
      
      <br/>

      <i class="s-icon-char" data-character="!"></i>
      <i class="s-icon-char fill" data-character="?"></i>

      <i class="s-icon-char success r_small" data-character="@"></i>
      <i class="s-icon-char warning fill r_small" data-character="+"></i>

      <i class="s-icon-char primary s-icon-char_circle" data-character="i"></i>
      <i class="s-icon-char fill s-icon-char_circle " data-character="×"></i>
      <i class="s-icon-char error fill s-icon-char_circle" data-character="×"></i>
      <i class="s-icon-char error fill s-icon-char_circle bold" data-character="×"></i>

      <br/>

      <i class="s-icon-swith"></i>
      <i class="s-icon-swith active"></i>

      <i class="s-icon-swith primary"></i>
      <i class="s-icon-swith primary active"></i>

      <i class="s-icon-swith success"></i>
      <i class="s-icon-swith success active"></i>

      <i class="s-icon-swith error"></i>
      <i class="s-icon-swith error active"></i>

      <i class="s-icon-swith warning"></i>
      <i class="s-icon-swith warning active"></i>

    </p>

  </section>


  <section id="rich-modal" class="s-modal ani-fade">
    <div class="s-mask"></div>
    <div class="s-modal-center s-rich-block s-grid-x align-center align-middle">
      <div class="text-center">
          <div class="s-loading-txt">内容</div>
      </div>
    </div>
  </section>

  <script type="module" src="./src/example.js"></script>
</body>

</html>